<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>门锁管理</title>
    <link rel="stylesheet" type="text/css" href="./css/lock-list.css">
    <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./js/lock-list.js"></script>
</head>
<body>
    <div class="header_container">
        <div class="header_container_date" id="dateInfo"></div>
        <div class="header_container_user">
            <span>欢迎您,</span><span class="admin">管理员</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./login.html"><span class="logout">退出</span></a>
        </div>
    </div>
    <div class="main_container">
        <div class="main_container_nav">
            <ul>
                <li class="triangle"><a href="./lock-list.html">门锁列表</a></li>
                <li><a href="./lock-log.html">门锁操作日志</a></li>
                <li><a href="./user-list.html">用户管理</a></li>
                <li><a href="./user-log.html">用户操作日志</a></li>
            </ul>
        </div>
        <div class="main_container_list">
            <table>
                <thead>
                    <tr>
                        <th>门锁ID</th>
                        <th>门锁所有人</th>
                        <th>门锁启用时间</th>
                        <th>门锁状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>111111</td>
                        <td>张三</td>
                        <td>20181208</td>
                        <td>启用</td>
                        <td><span class="state">禁用</span></td>
                    </tr>
                    <tr>
                        <td>222222</td>
                        <td>李四</td>
                        <td>20190102</td>
                        <td>禁用</td>
                        <td><span class="state">启用</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="main_container">
        <h2>大数据展示</h2>
        <div class="echarts_box_container">
            <div class="echarts_box" id="main"></div>
            <div class="echarts_box" id="info"></div>
        </div>
        <div class="echarts_box_container">
            <div class="chinamap_box" id="chinamap"></div>
        </div>
    </div>
    <div class="footer_container">
        &copy;&nbsp;&nbsp;版权所有&nbsp;&nbsp;&nbsp;&nbsp;品西科技&nbsp;&nbsp;&nbsp;&nbsp;侵权必究
    </div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript" src="./js/china.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main'));
        var myChart2 = echarts.init(document.getElementById('info'));
        var myChart3 = echarts.init(document.getElementById('chinamap'));

        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: '智能门锁使用率TOP5'
            },
            tooltip: {},
            legend: {
                data:['使用人数']
            },
            xAxis: {
                data: ["北京市","上海市","广东省","浙江省","河北省"]
            },
            yAxis: {},
            series: [{
                name: '使用人数',
                type: 'bar',
                data: [1523, 1020, 898, 412, 280]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);

        option2 = {
            title : {
                text: '北京市',
                x:'center',
                textStyle:{
                    color:'white'
                }
            },
            backgroundColor: '#2c343c',
            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:235, name:'昌平区'},
                        {value:274, name:'怀柔区'},
                        {value:310, name:'通州区'},
                        {value:335, name:'海淀区'},
                        {value:400, name:'朝阳区'}
                    ],
                    roseType: 'angle',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);

    function randomData() {
        return Math.round(Math.random()*500);
    }
 
    var mydata = [
        {name: '北京',value: randomData() },{name: '天津',value: randomData() },
        {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
        {name: '河北',value: randomData() },{name: '河南',value: randomData() },
        {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
        {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
        {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
        {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
        {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
        {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
        {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
        {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
        {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
        {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
        {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
        {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
        {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
        {name: '香港',value: randomData() },{name: '澳门',value: randomData() }
    ];

    var option3 = {  
                backgroundColor: '#FFFFFF',  
                title: {  
                    text: '全国地图大数据',  
                    subtext: '',  
                    x:'center'  
                },  
                tooltip : {  
                    trigger: 'item'  
                },  
                
                //左侧小导航图标
                visualMap: {  
                    show : true,  
                    x: 'left',  
                    y: 'center',  
                    splitList: [   
                        {start: 500, end:600},{start: 400, end: 500},  
                        {start: 300, end: 400},{start: 200, end: 300},  
                        {start: 100, end: 200},{start: 0, end: 100},  
                    ],  
                    color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
                },  
                
                //配置属性
                series: [{  
                    name: '数据',  
                    type: 'map',  
                    mapType: 'china',   
                    roam: true,  
                    label: {  
                        normal: {  
                            show: true  //省份名称  
                        },  
                        emphasis: {  
                            show: false  
                        }  
                    },  
                    data:mydata  //数据
                }]  
            };  

    // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);

</script>
</body>
</html>